<template>
  <div class="line-today-wrap">
    <!-- <div class="my-menu">
      <MyTab v-model="tabValue" :options="tabOptions" />
    </div> -->
    <base-charts v-if="tabValue === '1'" id="lineTodayDomIdWarn" style="margin-top: 10px; height: 100%;" :option="todayLineOption" @inited="todayChartInited"></base-charts>
    <!-- <base-charts v-if="tabValue === '2'" id="lineTodayDomIdWarn2" style="margin-top: 10px; height: 100%;" :option="todayLineOption2" @inited="todayChartInited2"></base-charts> -->
  </div>
</template>

<script>
import {get1YearW00000RtdTrend} from '@/api/h3yun'
import BaseCharts from '@/components/charts/base-charts.vue'
import * as echarts from 'echarts'
import MyTab from '@/components/MyTab.vue'

export default {
  components: {
    BaseCharts,
    MyTab
  },
  name: 'line-today',
  props: ['areaCode'],
  data() {
    return {
      list: [],
      list2: [],
      timer: null,
      chartInstance: null,
      chartInstance2: null,
      tabValue: '1',
      tabOptions: [
        {
          key: '1',
          name: '异常'
        },
        {
          key: '2',
          name: '超标'
        }
      ]
    }
  },
  mounted() {
    // 设置定时器，每分钟刷新一次数据
    this.timer = setInterval(() => {
      this.initData()
    }, 60000)
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  watch: {
    // 监听数据变化，更新图表
    list: {
      handler(newVal) {
        if (this.chartInstance && newVal.length > 0) {
          this.updateChart()
        }
      },
      deep: true
    },
    list2: {
      handler(newVal) {
        if (this.chartInstance2 && newVal.length > 0) {
          this.updateChart2()
        }
      },
      deep: true
    },
    areaCode: {
      handler(newVal) {
        this.initData()
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    todayLineOption() {
      return this.getOptions(this.list)
    },
    todayLineOption2() {
      return this.getOptions(this.list2)
    }
  },
  methods: {
    getOptions(list) {
      return {
        backgroundColor: 'transparent',
        title: {
         text: '立方米',
          top: '0%',
          left: '0%',
          textStyle: {
            fontSize: 12,
            color: '#fff',
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            },
            lineStyle: {
              color: 'rgba(110,212,255,0.6)',
              width: 1
            },
            crossStyle: {
              color: 'rgba(110,212,255,0.6)'
            }
          },
          formatter: function(params) {
            return `月份：${params.name}<br/>数量：${params.value} 立方米`;
          },
          backgroundColor: 'rgba(25,72,124,0.9)',
          borderColor: 'rgba(110,212,255,0.8)',
          borderWidth: 1,
          padding: [8, 12],
          extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
          textStyle: {
            fontSize: 13,
            color: '#fff',
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '20%',
          bottom: '5%',
          containLabel: true
        },
        xAxis : {
          type: 'category',
          boundaryGap: false,
          data: list.map(it => it.name),
          axisLabel: {
            color: '#fff',
            fontSize: 11,
            interval: 'auto'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(110,212,255,0.3)'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitNumber: 4,
          axisLabel: {
            color: '#fff',
            fontSize: 11
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(110,212,255,0.3)'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(54,83,125,1)'
            }
          }
        },
        series: [
          {
            name: '数量',
            data: list.map(it => it.value),
            type: 'line',
            barWidth: 8,
            symbol: 'circle',
            showSymbol: true,
            symbolSize: 5,
            lineStyle: {
              width: 2,
              shadowColor: 'rgba(55,187,251,0.3)',
              shadowBlur: 10
            },
            emphasis: {
              focus: 'series',
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 2,
                shadowColor: 'rgba(55,187,251,0.8)',
                shadowBlur: 10,
                color: '#37BBFB'
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#3977E6' },
                  { offset: 1, color: '#37BBFB' },
                ]),
                borderColor: 'rgba(255,255,255,0.8)',
                borderWidth: 1,
                shadowColor: 'rgba(55,187,251,0.5)',
                shadowBlur: 5
              }
            },
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(57, 119, 230, 0.3)' },
                { offset: 1, color: 'rgba(57, 119, 230, 0.1)' }
              ])
            }
          }
        ],
        animation: true,
        animationDuration: 1000
      }
    },
    async initData() {
      try {
        let res = await get1YearW00000RtdTrend(this.areaCode)
        this.list = res.data.map(s => ({
          name: s.name,
          value: s.value
        }))
        this.list2 = res.data.map(s => ({
          name: s.name,
          value: s.value
        }))
      } catch (error) {
        console.error('获取数据失败:', error)
      }
    },
    todayChartInited(chart) {
      // 保存图表实例，以便后续可能的操作
      this.chartInstance = chart
      // 强制显示tooltip
      if (chart && this.list.length > 0) {
        this.updateChart()
      }
    },
    todayChartInited2(chart) {
      this.chartInstance2 = chart
      if (chart && this.list2.length > 0) {
        this.updateChart2()
      }
    },
    updateChart() {
      // 更新图表数据
      this.chartInstance.setOption({
        xAxis: {
          data: this.list.map(it => it.name)
        },
        series: [{
          data: this.list.map(it => it.value)
        }]
      })
      // 确保tooltip正常工作
      this.chartInstance.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: this.list.length - 1
      })
      // 移除初始tooltip显示（延迟执行）
      setTimeout(() => {
        this.chartInstance.dispatchAction({
          type: 'hideTip'
        })
      }, 3000)
    },
    updateChart2() {
      // 更新图表数据
      this.chartInstance2.setOption({
        xAxis: {
          data: this.list2.map(it => it.name)
        },
        series: [{
          data: this.list2.map(it => it.value)
        }]
      })
      // 确保tooltip正常工作
      this.chartInstance2.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 0
      })
      // 移除初始tooltip显示（延迟执行）
      setTimeout(() => {
        this.chartInstance2.dispatchAction({
          type: 'hideTip'
        })
      }, 3000)
    }
  }
}
</script>

<style scoped lang="scss">
.line-today-wrap {
  margin-top: 2px;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  .my-menu {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(110,212,255,0.5), transparent);
    opacity: 0.5;
  }
}
</style>
